<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
		<title>我的收藏</title>
			<!-- amazeui -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/ui/css/amazeui.min.css" />
		<!-- lib -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/lib/swiper/css/swiper.min.css" />
		<!-- app -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/ui.css" />
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/header.css"/>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/attention.css"/>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/list.css"/>
		<style type="text/css">
			.choose_dian_on{
				background: url(${BASE_PATH}/static/app/img/shopCar.png) no-repeat 0px 0px;
				background-size:230%;
			}
			img{border:0;vertical-align: middle;}
			dt{width: 32%;margin-top: 5px;}
			dd{width: 64%;float: right;margin-top: -32%;}
			.app-item-title{
				display: inline-block;
				height: 60px;
				float: right;
				font-size: 16px;
				color: #5C5C67;
				line-height: 17px;
			}
			.app-price{
				padding-top: 20%;
			}
			.men_prices{
				position: relative;
				float: left;
			
			}
			.alines{
				display: inline-block;
				width: 110%;
				height: 1px;
				background: #f52f59;
				position: absolute;
				left: -5px;
				top: 50%;
				margin-top: -1px;
			}
			.sjf{width: 100%;float: left;color: #F797B7;}
			.men_jians{
				float: right;
			}
			.nin{
				margin-top: 50px;
			}
			 .logo_pic{
				width: 30px;
				height: 30px;
				border-radius:30px;
				display: inline-block;
				background: url(${BASE_PATH}/static/app/img/logo.png) no-repeat ;
				margin-left: 3px;
				margin-top: 3.5px;
				float: left;
			}
			.logo_text{
				height: 40px;
				line-height: 40px;
				display: inline-block;
				color: #595b60;
				font-size: 14px;
				margin-left: 6px;
				float: left;
			}
			.men{
			    display: inline-block;
			    width: 100%;
			    height: 50%;
			    color: #787878;
			    font-size: 12px;
			}
			.xianzi{
				width: 90%;
			}
		</style>
	</head>
	<body>
	   <div class="app-part app-part-flow">
			<header>
				<div class="header">
				<span class="back" onclick="history.go(-1);"></span>
				<a href="${BASE_PATH}/index"><span class="logo_pic"></span></a>
				<span class="logo_text">OK 妈咪</span>
				<span class="header_tab">编辑</span>
				</div>
			</header>
			<div id="recomGoodsList" class="content am-g app-goods-list nin"></div>
	    </div>
		 <div class="bottom_btn_box">
			 <img src="${BASE_PATH}/static/app/img/shouc.png" style="margin:0 auto;display:block;width: 20%;height: 100%;" width="140" onclick="doDelAll();">
		</div>
		<div data-am-widget="gotop" class="am-gotop am-gotop-fixed" >
			<a href="#top"><span class="am-gotop-title">回到顶部</span><i class="am-gotop-icon am-icon-chevron-up"></i></a>
		</div>
			
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery/jquery-1.11.2.min.js"></script>
		<!-- amazeui -->
		<script type="text/javascript" src="${BASE_PATH}/static/ui/js/amazeui.min.js"></script>
		<!-- lib -->
		<script type="text/javascript" src="${BASE_PATH}/static/lib/swiper/js/swiper.jquery.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/layer/layer.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/template/template.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-lazyload/jquery.lazyload.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-marquee/jquery.marquee.min.js"></script>
		<!-- app -->
		<script type="text/javascript" src="${BASE_PATH}/static/app/js/kit.js"></script>
		<!-- tpl -->
		<script type="text/html" id="dataTpl">
			{{each list as goods}}
				<div  data-goodsid="{{goods.id}}" class="att_goods am-u-md-4 am-u-lg-3 app-goods-item">
					<span class="choose_dian"></span>
					<div class="att_goods_box">
						 <dl onclick="detail({{goods.id}});">
            				<dt><img data-original="${FTP_PATH}{{goods.thumb}}" onerror="src='${BASE_PATH}/static/app/img/model.png';" class="lazyload" width="100%"></dt>
							<dd class="app-item-title">{{goods.name}}</dd>
            				<dd class="app-price">
            				{{if goods.type==1}}
								<span class="sjf">¥{{goods.sellPrice}}</span>
							{{else if goods.type==2}}
								<span class="sjf">{{if goods.paytype==1}}商品积分{{else if goods.paytype==2}}健康积分{{else if goods.paytype==3}}教育积分{{/if}} {{goods.sellpoint}}</span>
							{{else if goods.type==3}}
								<span class="sjf">{{if goods.paytype==1}}商品积分{{else if goods.paytype==2}}健康积分{{else if goods.paytype==3}}教育积分{{/if}} {{goods.sellpoint}} + ¥{{goods.sellPrice}}</span>
							{{/if}}
								<span class="men"><span class="men_prices"><a class="alines"></a>门市价:¥{{goods.marketPrice}}</span><span class="men_jians">已售{{goods.num}}件</span></span>
            				</dd>
            			</dl>
					</div>
					</div>
			{{/each}}
		</script>
		<script type="text/javascript">
			var pageNum = 0,totalPage = 1;
			//加载标识，表示当前是否有请求未完成，防止同时多个请求
			var loading = false;
			$(".bottom_btn").click(function(){
				$(".choose_dian").removeClass("show");
				$(".bottom_btn_box").removeClass("show");
				$(".bottom_btn").removeClass("show");
				$(".content").removeClass("contentshow"); 
				$(".att_goods").each(function(){ 
					var s =  $(this).children(".choose_dian").hasClass("choose_dian_on");
					if(s == true){
						$(this).remove();
					}
				})
			})
			$(function(){
				//绑定“加载中”进入加载事件
				Kit.util.onPageEnd(function(){
	               	if(pageNum < totalPage && !loading){
	               		loading = true;
	               		$("#recomGoodsList").append("<div class=\"app-loading\">正在加载</div>");
	                	Kit.ajax.post("${BASE_PATH}/my/collectionList",{pageNum:pageNum+1,pageSize:5},function(result){
							$("#recomGoodsList").append(template("dataTpl",result.object));
							//amazeui要求在最后一个元素上添加am-u-end样式，否则默认为右浮动
							$(".app-goods-item","#recomGoodsList").removeClass("am-u-end").last().addClass("am-u-end");
							//图片延迟加载
							$("img.lazyload","#recomGoodsList").not(".lazyload-binded").lazyload({
								failurelimit : 100,
								effect : "show"
							}).addClass("lazyload-binded");
							$(".app-loading","#recomGoodsList").remove();
							pageNum = result.object.pageNumber;
							totalPage = result.object.totalPage;
							//没找到数据
							if(totalPage==0) {
								$("#recomGoodsList").append("<div style=\"color:#00F;font-size:20px;text-align:center;\">您还没有收藏宝贝</div>");
								$(".header_tab").hide();
							}
							//重置加载标识
							loading = false;
						});
	               	}
				});
			});
			$(".header_tab").click(function(){
				$(".choose_dian").addClass("show");
				$(".bottom_btn_box").addClass("show");
				$(".bottom_btn").addClass("show");
				$(".content").addClass("contentshow");
				$(".att_goods_box").addClass("xianzi");
			})
			$(".content").on("click", ".att_goods", function(){
				var s = $(this).children(".choose_dian").hasClass("show");
				if(s == true){
					$(this).toggleClass("choose_dian_onn");
					$(this).children(".choose_dian").toggleClass("choose_dian_on");
				}
			});
			//删除选中的商品
			function doDelAll(){
				var $all = $(".att_goods.choose_dian_onn");
				var goodsids = new Array();
				if($all.length!=0){
						//移除选中的商品
						$all.each(function(index,item){
							goodsids.push($(item).data("goodsid"));
						});
					/* 	Kit.ui.confirm("确认取消收藏这"+$all.length+"种商品吗？",function(){ */
							Kit.ajax.post("${BASE_PATH}/my/cancelCollect",{goodsid:goodsids.join(",")},function(result){
								if(result.flag==0){
									//我的关注中没有其他商品时，刷新页面
									Kit.render.refresh();
								}
							});
						/* }); */
				} else {
					Kit.ui.alert("请选择您要删除的商品！");
				}
			}
			function detail(id){
				window.location.href="${BASE_PATH}/goods/jfdetail/"+id;
			}
		</script>
	</body>
</html>
